<template>
  <view>
    <u-popup v-model="show" mode="bottom" border-radius="14" @close="onClose" closeable>
      <view class="bg-white radius20 py40">
        <view class="fs36 fw-700 tc">选择提现方式</view>
        <view v-for="(item, index) in withdrawType" :key="index" @click="changWithdrawalType(item, index)"
          class="mt60 border-b px40 pb20">
          <template v-if="item.show">
            <view class="flex row-between">
              <view class="flex">
                <u-image width="56" height="56" :src="item.icon" v-if="showIcon"></u-image>
                <view class="ml20 fs32 fw-700">{{ item.name }}</view>
                <view class="ml24 fs20 border w76 h34 flex row-center" :class="{ isBindStyle: isBind[item.isBind] }">{{
                  isBind[item.isBind] ? '已绑定' : '未绑定' }}</view>
              </view>
              <view>
                <u-icon size="50" :name="payIndex === index ? 'checkmark-circle-fill' : 'checkmark-circle'"
                  :color="payIndex === index ? '#0089ff' : '#ccc'"></u-icon>
              </view>
            </view>
          </template>
        </view>
      </view>
      <view class="p20 pb40">
        <u-button type="warning" ripple @click="confirm">确认</u-button>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  props: {
    showPopup: {
      type: Boolean
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    isBind: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      typeItem: '',
      payIndex: '',
      show: false,
      withdrawType: [
        {
          name: '提现到微信',
          icon: '/static/icons/wx_pay.png',
          type: 'wechat',
          pay: 'wechat',
          show: true,
          isBind: 'iswx'
        },
        {
          name: '提现到支付宝',
          icon: '/static/icons/zfb_pay.png',
          type: 'alipay',
          pay: 'alipay',
          show: true,
          isBind: 'iszfb'
        }
      ]
    }
  },
  watch: {
    showPopup(val) {
      this.show = val
    }
  },
  methods: {
    confirm() {
      this.$emit('withdrawalType', this.typeItem)
    },
    changWithdrawalType(item, index) {
      this.payIndex = index
      this.typeItem = item
    },
    onClose() {
      this.show = false
      this.$emit('close', this.show)
    }
  }
}
</script>
<style lang="scss" scope>
.isBindStyle {
  color: #0089ff;
  border-color: #0089ff;
}
</style>
